<template>
  <view class="extend-round">
    <view
      v-for="(item, index) in extendGroup"
      :key="item.id"
      class="extend-item"
      :style="extendItemStyle(index)"
      @tap.stop.prevent="onExtendAction(item)"
    >
      <slot :name="item.id"></slot>
    </view>
  </view>
</template>

<script setup>
import { computed, inject } from 'vue'
import { roundCoordinate } from './extend-config'

const props = defineProps({
  // 扩展按钮组，最多5个按钮
  extendGroup: {
    type: Array,
    default: () => {
      return [
        { id: 'e1', name: '第1' },
        { id: 'e2', name: '第2' },
        { id: 'e3', name: '第3' },
        { id: 'e4', name: '第4' },
        { id: 'e5', name: '第5' }
      ]
    }
  },
  // 扩展按钮尺寸 单位px
  extendItemSize: {
    type: Number,
    default: 40
  }
})

const emits = defineEmits(['extendAction'])

const edge = inject('E_EDGE')

const extendItemStyle = computed(() => {
  return (index) => {
    const result = {
      width: props.extendItemSize + 'px',
      height: props.extendItemSize + 'px'
    }

    const placement = edge.value.direction
    const eNum = props.extendGroup.length

    const coorPlacement = roundCoordinate[placement]
    const coorList = coorPlacement && coorPlacement[eNum]
    const coor = coorList && coorList[index]
    result.transform = `translate(${coor?.x}%, ${coor?.y}%)`

    return result
  }
})

function onExtendAction(e) {
  emits('extendAction', e)
}
</script>

<script>
export default {
  options: {
    styleIsolation: 'shared',
    addGlobalClass: true,
    virtualHost: true,
    multipleSlots: true
  }
}
</script>

<style lang="scss">
.extend-round {
  position: absolute;

  .extend-item {
    border-radius: 50%;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
